<template>
    <div>
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>权限管理</el-breadcrumb-item>
            <el-breadcrumb-item>角色列表</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card>
            <el-button type="primary" @click="addRoleDialog = true">添加角色</el-button>
            <el-table :data="rolesList" border stripe>
                <el-table-column type="expand">
                    <template v-slot="scope">
                        <el-row v-for="(item, i) in scope.row.children" :key="item.id"
                        :class="{'border-top':i == 0}" class="border-bottom felx-center">
                            <el-col :span="5">
                                <el-tag closable @close="deleteRoleById(scope.row,item.id)">{{item.authName}}</el-tag>
                                <i class="el-icon-caret-right"></i>
                            </el-col>
                            <el-col :span="19">
                                <el-row v-for="(items,j) in item.children" :key="items.id"
                                :class="{'border-top':j != 0}" class="felx-center">
                                    <el-col :span="6">
                                        <el-tag type="success" 
                                        closable @close="deleteRoleById(scope.row,items.id)">{{items.authName}}</el-tag>
                                        <i class="el-icon-caret-right"></i>
                                    </el-col>
                                    <el-col :span="18">
                                        <el-tag v-for="threeItem in items.children" :key="threeItem.id" 
                                        closable @close="deleteRoleById(scope.row,threeItem.id)"
                                        type="warning">{{threeItem.authName}}</el-tag>
                                    </el-col>
                                </el-row>
                            </el-col>
                        </el-row>
                    </template>
                </el-table-column>
                <el-table-column type="index"></el-table-column>
                <el-table-column prop="roleName" label="角色名称"></el-table-column>
                <el-table-column prop="roleDesc" label="角色描述"></el-table-column>
                <el-table-column label="操作" width="300px">
                    <template v-slot="scope">
                        <!--修改-->
                        <el-button type="primary" 
                        @click="showRolesdialog(scope.row)"
                        icon="el-icon-edit" size="mini"
                        >编辑</el-button>
                        <!--删除-->
                        <el-button icon="el-icon-delete" type="danger" size="mini"
                        @click="deleteRow(scope.row)">删除</el-button>
                        <!--权限修改-->
                        <el-tooltip content="角色修改" placement="top" :enterable="false">
                            <el-button type="warning" @click="setRoles(scope.row)"
                            icon="el-icon-s-tools" size="mini"
                            >分配权限</el-button>
                        </el-tooltip>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
        <!--操作 权限分配修改-->
        <el-dialog
        title="分配权限"
        :visible.sync="setRolesDialog"
        @close="closeRolesDialog"
        width="40%" 
        center>
            <el-tree :data="rightsList" :props="props"
            show-checkbox node-key="id" default-expand-all
            :default-checked-keys="defKeys" ref="rolesTree"
            >
            </el-tree>
            <span slot="footer" class="dialog-footer">
                <div class="cancel" @click="setRolesDialog = false">取 消</div>
                <div class="determine"  @click="setRolesFunc()">确 定</div>
            </span>
        </el-dialog>
        <!-- 添加修改角色 -->
        <el-dialog
        :title="type != ''?'修改角色':'添加角色'"
        :visible.sync="addRoleDialog"
        @close="closeAddRolesDialog"
        width="40%" 
        center>
            <el-form ref="addform" :model="addform" :rules="rules" label-width="80px">
                <el-form-item label="角色名称" prop="roleName">
                    <el-input v-model="addform.roleName"></el-input>
                </el-form-item>
                <el-form-item label="角色描述">
                    <el-input v-model="addform.roleDesc"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <div class="cancel" @click="cancel('addform')">取 消</div>
                <div class="determine"  @click="addRolesFunc('addform')">确 定</div>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import {
    getRoles,
    deleteRoleMin,
    getRights,
    editRoles,
    addRoles,
    deleteRoles,
    editRole
} from  "@/request/api"; 
export default {
    name: 'rights',
    data(){
        return{
            rules: {
                roleName: [
                    { required: true, message: '请输入角色名称', trigger: 'blur' }
                ]
            },
            addform:{
                roleName: '',
                roleDesc: ''
            },
            rolesList: [],
            setRolesDialog: false,
            rightsList: [],
            props:{
                label: 'authName',
                children: 'children'
            },
            defKeys: [],
            roleId: '',
            addRoleDialog: false,
            type: ''
        }
    },
    created(){
        this.getRolesList()
    },
    methods:{
        getRolesList(){
            getRoles().then((res)=>{
                if(res.meta.status == 200){
                    this.rolesList = res.data;
                }else{
                    this.$message.error(res.meta.msg);
                    return false;
                }
            })
        },
        //小类删除
        deleteRoleById(v,n){
            this.$confirm('此操作将永久删除, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                let data = {
                    roleId: v.id,
                    rightId: n
                }
                deleteRoleMin(data).then(res => {
                    if(res.meta.status == 200){
                        // this.getRolesList();
                        v.children = res.data
                        this.$message.success(res.meta.msg);
                    }else{
                        this.$message.error(res.meta.msg);
                    }
                })
            }).catch(err => err);
        },
        //操作 --- 权限分配修改
        setRoles(info){
            getRights('tree').then((res)=>{
                if(res.meta.status == 200){
                    this.getLeafKeys(info,this.defKeys);
                    this.roleId = info.id;
                    this.rightsList = res.data;
                    this.setRolesDialog = true;
                }else{
                    this.$message.error(res.meta.msg);
                    return false;
                }
            })
        },
        //
        getLeafKeys(v,arr){
            if(!v.children){
                return arr.push(v.id)
            }
            v.children.forEach(item=>{
                this.getLeafKeys(item,arr)
            })
        },
        closeRolesDialog(){
            this.defKeys = []
        },
        //修改权限
        setRolesFunc(){
            let keys = [
                ...this.$refs.rolesTree.getCheckedKeys(),
                ...this.$refs.rolesTree.getHalfCheckedKeys(),
            ]
            let arr = {
                rids: keys.join(',')
            }
            editRoles(this.roleId,arr).then((res)=>{
                if(res.meta.status == 200){
                    this.getRolesList()
                    this.setRolesDialog = false;
                }else{
                    this.$message.error(res.meta.msg);
                    return false;
                }
            })
        },
        //新增角色
        closeAddRolesDialog(){
            this.type = ''
            this.$refs['addform'].resetFields();
        },
        addRolesFunc(formName){
            this.$refs[formName].validate(async valid => {
                if(!valid) return;
                var loading = this.$loading({
                    lock: true,
                    text: 'Loading',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                });
                if(this.type == 'edit'){
                    editRole(this.addform).then(res => {
                        if(res.meta.status == 200){
                            this.getRolesList();
                            this.$message.success('修改成功！');
                            this.addRoleDialog = false
                        }else{
                            this.$message.error(res.meta.msg);
                        }
                        loading.close();
                    })
                }else{
                    addRoles(this.addform).then(res => {
                        if(res.meta.status == 201){
                            this.getRolesList();
                            this.$message.success(res.meta.msg);
                            this.addRoleDialog = false
                        }else{
                            this.$message.error(res.meta.msg);
                        }
                        loading.close();
                    })
                }
                
            });
        },
        cancel(formName){
            this.addRoleDialog = false;
            this.$refs[formName].resetFields();
        },
        //删除角色
        deleteRow(info){
            this.$confirm('此操作将永久删除该角色, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                deleteRoles(info.id).then(res => {
                    if(res.meta.status == 200){
                        this.getRolesList();
                        this.$message.success(res.meta.msg);
                    }else{
                        this.$message.error(res.meta.msg);
                    }
                })
            }).catch(err => {err});
        },
        //修改角色
        showRolesdialog(info){
            this.type = 'edit';
            this.addRoleDialog = true;
            this.addform = {
                ...info
            }
            console.log(this.addform)
        }
    }
}
</script>

<style lang="less" scoped>
.border-top{
    border-top: 0.5px solid rgb(236, 236, 236);
}
.border-bottom{
    border-bottom: 0.5px solid rgb(236, 236, 236);
}
.el-tag{
    margin: 8px;
}
.felx-center{
    display: flex;
    align-items: center;
}
</style>